<template>
    <div ref="canvas"></div>
</template>

<script setup lang="ts">
import { Chart, ShapeAttrs, View } from '@antv/g2';
import { assign, forEach, intersection, max } from 'lodash-es';
import { v4 } from 'uuid';
import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import moment from 'moment';
import { ChartCfg, TooltipCallback } from '@antv/g2/lib/interface';
import { IDate } from '../../interface';
import { Myanimate } from '../../sciencechat/type';

const prop = defineProps<{ data: IDate[], height: number, color?: string | string[], chartCfg?: ChartCfg, tooltip?: TooltipCallback, charstyle?: ShapeAttrs }>()
const tclass = v4()
const canvas = ref<HTMLDivElement>()
const chart = shallowRef<Chart>()



const _chart = shallowRef<View>()

watch(() => prop.data, () => {
    _chart.value?.changeData(prop.data);
    // start()
    _chart.value?.render();
})

const _tooltip: TooltipCallback = (day, count, type) => {
    const title1 = moment(day, 'YYYY-WW').format('YYYY-WW周')
    const title2 = moment(day, 'YYYY-WW').format('MM-DD')
    const title3 = moment(day, 'YYYY-WW').add(1, 'week').format('MM-DD')
    const data = {
        title: `${title1} (${title2} - ${title3})`,
        value: count,
        name: type
    }
    return data
}

function start() {
    if (chart.value) {

        chart.value.clear()
        const tooltip = prop.tooltip || _tooltip
        const area = chart.value.area().position('day*count').tooltip('day*count*type', tooltip).shape('smooth').animate(Myanimate)

        if (prop.color) {
            area.color('type', prop.color)
        } else {
            area.color('type')
        }
        if (prop.charstyle) {
            area.style(prop.charstyle)
        }
        _chart.value = chart.value.interaction(tclass);
        _chart.value.axis('count', {
            label: {
                style: {
                    fill: '#fff'
                }
            },
            grid: {
                line: {
                    type: 'line',
                    style: {
                        fill: '#CCCCCC',
                        lineDash: [2],
                        fillOpacity: 0.2,
                        stroke: '#CCCCCC',
                        strokeOpacity: 0.2
                    }
                }
            },
        })
        const line = chart.value
            .line()
            .position('day*count').shape('smooth').animate(Myanimate)
        if (prop.color) {
            line.color('type', prop.color)
        } else {
            line.color('type')
        }

        _chart.value.scale('count', {
            nice: true
        })

        const point = chart.value
            .point()
            .position('day*count')
            .shape('circle')
            .style({
                // stroke: '#fff',
                lineWidth: 1,
            }).animate(Myanimate)
        if (prop.color) {
            point.color('type', prop.color)
        } else {
            point.color('type')
        }
        chart.value.axis('day', {
            label: {
                style: {
                    fill: '#fff'
                }
            },
            subTickLine: null,
            tickLine: null,
            line: {
                style: {
                    fill: '#CCCCCC',
                    lineDash: [2],
                    fillOpacity: 0.2,
                    stroke: '#CCCCCC',
                    strokeOpacity: 0.2
                }
            }
        });
        chart.value.legend(false)

    }
}

onMounted(() => {
    // let all = 0
    // prop.data.forEach((a) => all = a.count + all)
    if (canvas.value) {
        chart.value = new Chart(assign({
            container: canvas.value,
            autoFit: true,
            height: prop.height,
            padding: [70, 80, 70, 80],
            width: 614

        }, prop.chartCfg))
        chart.value.data(prop.data);
        start()
        chart.value.render();
    }
})

onUnmounted(() => {
    if (_chart.value)
        _chart.value.removeInteraction(tclass)
})

defineExpose({
    data: _chart.value
})

</script>